<template>
  <div>
    <el-dialog width="70%" :visible.sync="dialogDetailVisible" title="详情">
      <el-descriptions
        class="margin-top"
        title="订单信息"
        :column="5"
        direction="horizontal"
      >
        <el-descriptions-item label="订单号" :span="2">{{
          detailInfo.order_number
        }}</el-descriptions-item>
        <el-descriptions-item label="订单总金额"
          >￥{{ detailInfo.need_money }}</el-descriptions-item
        >
        <el-descriptions-item label="配送费"
          >￥{{ detailInfo.distribution_fee }}</el-descriptions-item
        >
        <el-descriptions-item label="成本价总金额"
          >￥{{ detailInfo.cost_price }}</el-descriptions-item
        >
        <el-descriptions-item label="收货人">{{
          detailInfo.receiver_name
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{
          detailInfo.receiver_mobile
        }}</el-descriptions-item>
        <el-descriptions-item label="收货地址">{{
          detailInfo.receiver_province +
          detailInfo.receiver_city +
          detailInfo.receiver_area
        }}</el-descriptions-item>
        <el-descriptions-item label="详细地址">{{
          detailInfo.receiver_address
        }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <span class="text">{{
            behalfStatusText(detailInfo.behalf_status)
          }}</span>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        class="margin-top"
        :title="item.product_name"
        :column="7"
        direction="vertical"
        border
        v-for="(item, index) in detailInfo.products"
        :key="index"
      >
        <el-descriptions-item label="供货商商品编码">{{
          item.supplier_product_number
        }}</el-descriptions-item>
        <el-descriptions-item label="供货商">{{
          item.supplier_product
        }}</el-descriptions-item>
        <el-descriptions-item label="商品数量">{{
          item.product_number
        }}</el-descriptions-item>
        <el-descriptions-item label="系统成本价">{{
          item.cost_price
        }}</el-descriptions-item>
        <el-descriptions-item label="渠道商成本价">{{
          item.supplier_cost_price
        }}</el-descriptions-item>
        <el-descriptions-item label="已退款数量">
          <span class="text">{{ item.refund_number }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="操作">
          <el-button
            type="warning"
            size="mini"
            @click="$refs.refund.open(1, item)"
            >退款</el-button
          >
          <el-button
            type="info"
            size="mini"
            v-if="
              detailInfo.behalf_status == 60 || detailInfo.behalf_status == 60
            "
            @click="$refs.refund.open(2, item)"
            >上传售后单</el-button
          >
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <myRefund ref="refund"></myRefund>
  </div>
</template>

<script>
import myRefund from "../refund"
import { detail } from "@/api/behalf"
export default {
  name: "detail",
  components: { myRefund },
  data() {
    return {
      dialogDetailVisible: false,
      detailInfo: {},
    }
  },
  computed: {
    behalfStatusText() {
      return (status) => {
        if (status == 50) {
          return "未发货"
        } else if (status == 60) {
          return "已发聚水潭"
        } else if (status == 100) {
          return "已发货"
        } else {
          return "已取消"
        }
      }
    },
  },
  methods: {
    async show(row) {
      try {
        const { data } = await detail({ behalf_id: row.id })
        this.detailInfo = data
        this.dialogDetailVisible = true
      } catch (ex) {
        console.log(ex)
        this.$msg.errorMsg(ex.msg)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.text {
  color: $base-status-color;
}
</style>
